<template>
	<view class="content">
		<view class="uni-list">
			<view class="car_box">
				<view class="tip">故障区域</view>
				<view class="uni-flex">
					<view class="kaung" @click="pickerShow('1')">{{ area.label }}</view>
				</view>
				<view class="tip">故障地址</view>
				<view class="kaung"><input type="text" v-model="fjh" placeholder="请输入详细地址,如门牌号" /></view>
				<view class="tip">报修设施</view>
				<view class="uni-flex">
					<view class="kaung" @click="pickerShow('3')">{{ goods.label }}</view>
				</view>
				<view class="tip">故障描述</view>
				<view class="kaung"><input type="text" v-model="ms" placeholder="请输入描述" /></view>
				<view class="tip">姓名</view>
				<view class="kaung"><input type="text" v-model="name" /></view>
				<view class="tip">联系电话</view>
				<view class="kaung"><input type="number" v-model="dh" /></view>
				<view class="tip">
					图片
					<text style="color:#8f8f94;float: right;padding-right: 20upx;">{{ imageList.length }}/3</text>
				</view>
				<view class="feedback-body feedback-uploader">
					<view class="uni-uploader">
						<view class="uni-uploader-body">
							<view class="uni-uploader__files">
								<block v-for="(image, index) in imageList" :key="index">
									<view class="uni-uploader__file" style="position: relative;">
										<image class="uni-uploader__img" :src="image" @tap="previewImage"></image>
										<view class="close-view" @click="close(index)">x</view>
									</view>
								</block>
								<view class="uni-uploader__input-box" v-show="imageList.length < 3">
									<view class="uni-uploader__input" @tap="chooseImg"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tip">
				无人维修
				<text style="color:#8f8f94;">（房间无人时进行维修）</text>
			</view>
			<view class="kaung">
				<radio-group @change="radioChange">
					<label class="radio">
						<radio value="1" checked="true" />
						同意
					</label>
					<label class="radio">
						<radio value="0" />
						不同意
					</label>
				</radio-group>
			</view>
			
			<view class="tip">
				是否需要回访
			</view>
			<view class="kaung">
				<radio-group @change="radioChange1">
					<label class="radio">
						<radio value="0" checked="true" />
						不需要
					</label>
					<label class="radio">
						<radio value="1"  />
						需要
					</label>
				</radio-group>
			</view>
		</view>

		<mpvue-picker ref="mpvuePicker" :deepLength="deepLength" @onConfirm="onConfirm" :pickerValueArray="pickerValueArray"
		 :pickerValueDefault="pickerValueDefault" :mode="mode"></mpvue-picker>
		<view class="btn"><button type="primary" @tap="send()">发送</button></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import mpvuePicker from '../../components/mpvue-picker/mpvuePicker.vue';
	export default {
		computed: mapState(['TOKEN', 'URL', 'USER_INFO']),
		components: {
			mpvuePicker
		},
		data() {
			return {
				fjh: '',
				ms: '',
				userId: "",
				name: '',
				dh: '',
				imageList: [],
				bxImgs: [],
				radio: '1',
				radio1: '0',
				deepLength: 2,
				pickerValueArray: [],
				pickerValueDefault: [0, 0, 0],
				mode: 'multiLinkageSelector',
				selcIndex: 0,
				area: {
					index: [0, 0],
					label: '请选择故障区域和楼宇',
					value: ['w', '201d2a964c4411e9b07600163e0c01db']
				},
				goods: {
					index: [0, 0],
					label: '请选择故障设施',
					value: ['w', '201d2a964c4411e9b07600163e0c01db']
				},
				areaData: [],
				goodsData: []
			};
		},
		onLoad() {
			this.repair('1');
			this.repair('3');
			console.log(this.TOKEN);
			this.name = this.USER_INFO.name;
			this.dh = this.USER_INFO.phoneNumber;
		},
		methods: {
			radioChange(e) {
				console.log(e.detail);
				this.radio = e.detail.value;
			},
			radioChange1(e) {
				console.log(e.detail);
				this.radio1 = e.detail.value;
			},
			pickerShow(res) {
				if (res === '1') {
					this.pickerValueArray = this.areaData;
					this.selcIndex = 0;
					this.pickerValueDefault = this.area.index;
					// console.log(this.pickerValueArray);
					this.mode = 'multiLinkageSelector';
					this.deepLength = 3;
					this.pickerValueDefault = [0, 0, 0];
				} else if (res === '3') {
					this.deepLength = 2;
					this.pickerValueArray = this.goodsData;
					this.selcIndex = 1;
					this.pickerValueDefault = this.goods.index;
				}
				this.$refs.mpvuePicker.show();
			},
			showMulLinkageTwoPicker() {
				this.pickerValueArray = this.mulLinkageTwoPicker;

				this.$refs.mpvuePicker.show();
			},
			repair(classType) {
				uni.request({
					method: 'POST',
					url: this.URL + 'dict/getDictTreeList',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						dicType: classType
					},
					success: res => {
						let newData = res.data.data;
						if (classType === '1') {
							this.areaData = newData;
						} else if (classType === '3') {
							newData.map((val, index) => {
								if (val.children.length === 0) {
									console.log(val);
									val.children = [{
										label: val.label,
										value: ""
									}]
								}
							})
							this.goodsData = newData;
						}
					}
				});
			},
			...mapMutations(['SIGN_OUT', 'TO_UPDATE']),
			onConfirm(e) {
				console.log(e);
				console.log(11111111);
				if (this.selcIndex === 0) {
					this.area = e;
				} else if (this.selcIndex === 1) {
					this.goods = e;
				}
			},
			send() {
				if (!this.ms || !this.fjh) {
					uni.showToast({
						icon: 'none',
						title: '信息有漏填'
					});
					return;
				}
				if(this.radio1 === '1'){
					if (!this.dh) {
						uni.showToast({
							icon: 'none',
							title: '请填写联系电话'
						});
						return;
					}
				}
				if (this.goods.label.substr(0, 3) === '请选择') {
					uni.showToast({
						icon: 'none',
						title: '选项漏选'
					});
					return;
				}
				if (this.area.label.substr(0, 3) === '请选择') {
					uni.showToast({
						icon: 'none',
						title: '选项漏选'
					});
					return;
				}
				// if (this.imageList.length === 0) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请上传图片'
				// 	});
				// 	return;
				// }
				uni.showLoading({
					title: '发送中'
				});

				let imgs = this.imageList.map((value, index) => {
					return {
						name: 'bxImg_' + index,
						uri: value
					};
				});
				if (imgs.length == 0) {
					this.upDateBx();
					return;
				}
				for (let i = 0; i < imgs.length; i++) {
					uni.uploadFile({
						method: 'POST',
						header: {
							token: this.TOKEN
						},
						filePath: imgs[i].uri,
						name: 'img',
						url: this.URL + 'bx/uploadImg',
						success: res => {
							let resData = JSON.parse(res.data);
							console.log(resData);
							if (resData.success) {
								this.bxImgs.push(resData.data);
								if (i == imgs.length - 1) {
									this.upDateBx();
								}
							} else {
								this.SIGN_OUT();
								uni.showToast({
									icon: 'none',
									title: '账号验证失效，请重新登录'
								});
								setTimeout(() => {
									uni.navigateBack();
								}, 1000);
							}
						}
					});
				}
			},
			upDateBx() {
				let data = {
					// bxArea: this.area.value[0],
					// bxBuild: this.area.value[1],
					//bxBtype: this.goods.value[0],
					//bxStype: this.goods.value[1],
					// bxRoomnum: this.fjh,
					bxImgs: this.bxImgs,
					bxAreaName: this.area.label,
					bxAddr: this.fjh,
					bxItemName: this.goods.label,
					bxAreaId: this.area.value[0] + '/' + this.area.value[1],
					bxItemId: this.goods.value[0] + '/' + this.goods.value[1],

					bxContent: this.ms,
					userName: this.name,
					userPhone: this.dh,
					isNopeople: this.radio,
					isRvisit:this.radio1,
					bxFrom:5,
				};
				console.log(this.TOKEN);
				console.log(data);
				uni.request({
					url: this.URL + 'bx/addBx',
					data: data,
					method: 'POST',
					header: {
						"token": this.TOKEN,
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res.data);
						if (res.data.success) {
							this.TO_UPDATE(true);
							uni.showToast({
								title: '报修成功'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1000);
						} else {
							this.SIGN_OUT();
							uni.showToast({
								icon: 'none',
								title: '账号验证失效，请重新登录'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1000);
						}
					}
				});
			},
			chooseImg() {
				//选择图片
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					count: 3 - this.imageList.length,
					success: res => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
					}
				});
			},
			previewImage() {
				//预览图片
				uni.previewImage({
					urls: this.imageList
				});
			},
			close(e) {
				this.imageList.splice(e, 1);
			}
		}
	};
</script>

<style>
	.uni-list {
		border-radius: 10upx;
	}

	.uni-list::before {
		background: none;
	}

	.tip {
		height: 80upx;
		line-height: 80upx;
		/* background: #EFEFF4; */
		text-indent: 2em;
	}

	.kaung {
		text-align: center;
		height: 80upx;
		line-height: 80upx;
		background: #d8d8d8;
		flex: 1;
	}

	.uni-input {
		background: #d8d8d8;
	}

	.kaung input {
		height: 100%;
	}

	.btn {
		margin-top: 40upx;
		background: white;
	}

	.input-view {
		font-size: 28upx;
	}

	.uni-uploader__file,
	.uni-uploader__input-box {
		width: 30%;
	}

	.close-view {
		text-align: center;
		line-height: 14px;
		height: 16px;
		width: 16px;
		border-radius: 50%;
		background: #ff5053;
		color: #ffffff;
		position: absolute;
		top: -6px;
		right: -4px;
		font-size: 12px;
	}
</style>
